<template>
  <div class='edit-project-container'>
    
    <addProject :status="projectStatus"
                :projectId="projectId"
                @callback="editBasicInfoCallback"
                v-if="step===1">
    </addProject>
    <!-- <el-steps class="project-step"
              :active="step"
              align-center>
      <el-step title="填写基本信息">
      </el-step>
      <el-step title="填写单位信息">
      </el-step>
      <el-step title="完成">
      </el-step>
    </el-steps>
    <addProject :status="projectStatus"
                :projectId="projectId"
                @callback="editBasicInfoCallback"
                v-if="step===1">
    </addProject>
    <ModifyCompanyInfo @callback="editCompanyInfoCallback"
                       @previousCallback="previousStep"
                       @success="successCallback"
                       :projectId="projectId"
                       v-if="step===2">

    </ModifyCompanyInfo>
    <div v-if="step===3"
         class="success-info">
      <img src="@/assets/pay-success.png"
           alt="">
      <h2>操作成功</h2>
      <p>已完成项目立项</p>
      <div class="btn-group">
        <el-button @click="createProject"
                   type="primary">继续立项</el-button>
        <el-button @click="backToList">返回列表</el-button>
      </div>
    </div> -->
  </div>
</template>
<script>
import addProject from '@/pages/ProjectCenter/addProject'
import ModifyCompanyInfo from '@/pages/ProjectCenter/components/ModifyCompanyInfo'
export default {
  data () {
    return {
      // 编辑项目的步骤
      step: 1,
      // 新增或修改项目状态
      projectStatus: 'update',
      projectId: 0
    }
  },
  components: {
    addProject,
    ModifyCompanyInfo
  },
  methods: {
    // 第一步填写基本信息完成后的回调
    editBasicInfoCallback (cb) {
      this.step = cb.step
      this.projectId = cb.id
      window.localStorage.setItem('editProjectInfo', JSON.stringify(cb))
      console.log(cb, 'callback')
    },

    editCompanyInfoCallback (cb) {

    },
    // 第二步返回上一步时的回调
    previousStep (cb) {
      this.step = cb.step
      this.projectId = cb.id
      this.projectStatus = 'update'
      window.localStorage.setItem('editProjectInfo', JSON.stringify(cb))
    },
    // 第二步关联公司信息完成后的回调
    successCallback (cb) {
      this.step = cb.step
      window.localStorage.setItem('editProjectInfo', JSON.stringify(cb))
    },
    // 继续立项
    createProject () {
      this.step = 1
      this.projectId = 0
      this.projectStatus = 'create'
      window.localStorage.setItem('editProjectInfo', JSON.stringify({ step: 1, id: 0 }))
    },
    // 返回列表
    backToList () {
      this.$router.push({ path: '/projectList' })
    }
  },
  created () {
    let local = JSON.parse(window.localStorage.getItem('editProjectInfo') || '{}')
    this.step = local.step || 1
    this.projectId = local.id || 0
    this.projectStatus = local.status || 'create'
  },
  mounted () {
  }
}
</script>
<style scoped lang='scss'>
.edit-project-container {
  .project-step {
    margin: 20px 0;
  }
  .success-info {
    text-align: center;
    margin-top: 50px;
    h2 {
      margin: 20px 0;
    }
    .btn-group {
      margin-top: 40px;
    }
  }
}
</style>
